<!DOCTYPE html>
<html>
<head lang="zh-cn">
<link
	href="$!{__beat.server.contextPath}/bootstrap/css/bootstrap.min.css"
	rel="stylesheet">
<link
	href="$!{__beat.server.contextPath}/bootstrap/datepicker/datepicker3.css"
	rel="stylesheet">
<link rel="stylesheet"
	href="$!{__beat.server.contextPath}/bootstrap/css/App.css"
	type="text/css" />
<link rel="stylesheet"
	href="$!{__beat.server.contextPath}/bootstrap/css/font-awesome.min.css"
	type="text/css" />

<link rel="stylesheet" type="text/css"
	href="$!{__beat.server.contextPath}/css/wnl.css">
<meta charset="UTF-8">
<meta name="viewport"
	content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>数据看板</title>
<style>
.comboxtootip {
	position: absolute;
	background-color: white;
	border: 1px solid #ccc;
	border-color: #95B8E7;
	overflow: auto;
	border-top-width: 1px;
	box-sizing: border-box;
	text-align: left;
	font-family: '微软雅黑';
	height: 150px;
	z-index: 999;
}

.combobox-item {
	font-size: 14px;
	font-family: inherit;
	padding: 3px;
	padding-right: 0px;
}
</style>
</head>
<body>
	<div class="container-fluid">

		<div class="datacontent" id="qsContent">
			<div class="dataTit">
				<i class="mark"></i><span>职位薪资趋势</span>
			</div>

			<div class="dataShow">
				<div class="row" style="margin-top: 30px">
					<div class="col-md-1 col-sm-2 col-md-offset-1">
						<label for="city">城 市：</label>
					</div>
					<div class="col-md-2 col-sm-3">
						<div class="input-group" style="width: 150px">
							<input id="city" name="city" value="${CityList[0]}" type="text"
								class="form-control" style="padding: 1px 6px; height: 25px">
							<a id="city_option" class="input-group-addon"
								style="background: url('$!{__beat.server.contextPath}/image/combo_arrow.png'); background-position: center; background-repeat: no-repeat; cursor: pointer;"></a>
						</div>
						<div id="cityOptions" class="comboxtootip"
							style="width: 150px; display: none">
							#foreach($!{p} in ${CityList})
							<div class="combobox-item">$!{p}</div>
							#end
						</div>
					</div>

					<div class="col-md-1 col-sm-2 col-md-offset-1">
						<label for="position">职 位：</label>
					</div>
					<div class="col-md-2 col-sm-3">
						<div class="input-group" style="width: 150px">
							<input id="cate" name="cate" value="${CateList[0]}" type="text"
								class="form-control" placeholder=""
								aria-describedby="basic-addon2"
								style="padding: 1px 6px; height: 25px"> <a
								id="cate_option" class="input-group-addon"
								style="background: url('$!{__beat.server.contextPath}/image/combo_arrow.png'); background-position: center; background-repeat: no-repeat; cursor: pointer;"></a>
						</div>
						<div id="cateOptions" class="comboxtootip"
							style="width: 150px; display: none;">
							#foreach($!{p} in ${CateList})
							<div class="combobox-item">$!{p}</div>
							#end

						</div>

					</div>

					<div class="col-md-2 col-sm-2 col-md-offset-1">
						<button id="flushBtn" class="btn btn-info btn-sm">刷 新</button>
					</div>

				</div>


				<div class="row" style="height: 420px;">
					<div class="col-md-12 " style="height: 80px"></div>
					<div id="qushitu" class="col-md-12" style="height: 400px"></div>
				</div>
				<div class="row">
					<div class="col-md-10 col-sm-10 col-md-offset-1 col-sm-offset-1"
						style="height: 50px; margin-top: 30px;">
						<p>
							说明：职位供需指数从数量上反映同一职位的求职者与招聘方的供需紧缺程度，供需指数越大说明该职位竞争越激烈。供需指数可从一定程度上反映
							求职的难易程度，实际求职难易程度还需结合职位本身积求职者自身条件等多个因素考虑。</p>
					</div>
				</div>


			</div>
		</div>
		<!-- dataShow  -->
	</div>
	<!-- datacontent  -->
	<!-- 余额客户结构部分结束 -->


	</div>




</body>
<script src="$!{__beat.server.contextPath}/bootstrap/jquery.js"></script>

<link rel="stylesheet"
	href="$!{__beat.server.contextPath}/bootstrap/libs/jquery-ui/jquery-ui-1.9.2.custom.css"
	type="text/css" />
<link type="text/css"
	href="$!{__beat.server.contextPath}/bootstrap/libs/jquery-ui/jquery.multiselect.css"
	rel="stylesheet" />
<script
	src="$!{__beat.server.contextPath}/bootstrap/libs/jquery-ui/jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript"
	src="$!{__beat.server.contextPath}/bootstrap/libs/jquery-ui/jquery.multiselect.js"></script>


<script
	src="$!{__beat.server.contextPath}/bootstrap/js/libs/bootstrap.js"></script>
<script
	src="$!{__beat.server.contextPath}/bootstrap/datepicker/bootstrap-datepicker.js"></script>
<script
	src="$!{__beat.server.contextPath}/bootstrap/datepicker/nongLiDate.js"></script>
<script
	src="$!{__beat.server.contextPath}/bootstrap/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script src="$!{__beat.server.contextPath}/echarts2/source/echarts.js"></script>
<!-- <script src="$!{__beat.server.contextPath}/js/wnl.js"></script> -->
<script src="$!{__beat.server.contextPath}/bootstrap/js/App.js"></script>
<script type="text/javascript">
        var cityOptions = $('#cityOptions').get(0);
        var cateOptions = $('#cateOptions').get(0);
        //点击城市下拉菜单
		$('#city_option').click(function(){
			   setDisplayBlock('#cityOptions .combobox-item');
			   var display = cityOptions.style.display;   	   
			   if(display == 'none'){
				   cityOptions.style.display= 'inline-block'; 
			   }else{
				   cityOptions.style.display= 'none';
			   }
		});
        
        //点击职位下拉菜单
        $('#cate_option').click(function(){
        	   setDisplayBlock('#cateOptions .combobox-item');
			   var display = cateOptions.style.display;   	   
			   if(display == 'none'){
				   cateOptions.style.display= 'inline-block'; 
			   }else{
				   cateOptions.style.display= 'none';
			   }
		});
        
        $(".combobox-item").mouseover(function(){
 	          this.style.background = '#eaf2ff';
 	      
 	    });
        
        $(".combobox-item").mouseout(function(){
             this.style.background = 'white';
             this.style.fontColor = 'white';
        });
        
        //选择城市
        $("#cityOptions .combobox-item").click(function(){
      	      var content = $(this).text(); 
      	      $('#city').val(content);
      	      cityOptions.style.display= 'none';
         });
        //选择职位
        $("#cateOptions .combobox-item").click(function(){
      	      var content = $(this).text(); 
      	      $('#cate').val(content);
      	      cateOptions.style.display= 'none';
         });
        
        var tempDiv = $('#cityOptions');
        //城市输入框提示
        $('#city').keyup(function(){
        	tooTip(this,'#cityOptions',cityOptions);
        }); 
        
      //职位输入框提示
        $('#cate').keyup(function(){
     	     tooTip(this,'#cateOptions',cateOptions);
        });
      
      
      function tooTip(obj,seletor,Options){
    	  var text = $(obj).val();
     	  setDisplayBlock(seletor+' .combobox-item');
     	   //输入值为空，显示默认
     	   if(text == ""){
     		  Options.style.display= 'inline-block';      	   
     		  return;
     	   }
           
     	    $(seletor+' .combobox-item').each(function(index,element){
                 if($(element).text() == text){
                	element.style.background = '#ECD7B7';
                } 
     	    	//没匹配到的div将其display设为none
     		   if($(element).text().match(text)==null){	    			    
     			    element.style.display = 'none';
     		   }
     	   }); 
     	   Options.style.display= 'inline-block';
      }
        
        
        //给所有的combox-item设置显示（display：inline-block）
        function setDisplayBlock(seletor){
        	$(seletor).each(function(index,element){
      			    element.style.display = 'block'; 
      	   });
        }
        
        $("body").click(function(e) {
            if(e.target.tagName != "A") {
                $("#cityOptions").hide();
                $("#cateOptions").hide();
            }
         
        });  
    

    // 路径配置
    require.config({paths: {echarts: "$!{__beat.server.contextPath}/echarts2/dist",dashboard: "$!{__beat.server.contextPath}/js/zhishuzhaopin"}});
	
	var charts = [];
	
    //
    require(['dashboard/qushi_v1'],function(totalEC){
        charts.push(totalEC);
        totalEC.show();
    });
    

</script>
</html>